<template>
    <el-card>
        <div style="display:flex;justify-content: space-between">
            <div>
                <el-input v-model="queryData.createMember" placeholder="创建人" size="small"></el-input>
                <el-select v-model="queryData.momentsType" placeholder="朋友圈类型" size="small">
                    <el-option v-for="item in dictionary.momentsType" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker
                        size="small"
                        v-model="queryData.publishTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
                <el-divider direction="vertical"></el-divider>
                <el-button type="primary" @click="queryDataHandle" size="small">查询</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button plain @click="resetQuery" size="small">重置</el-button>
            </div>
            <div>
                <el-button type="primary" @click="queryDataHandle" size="small">同步至历史朋友圈</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button plain size="small">同步企微朋友圈记录</el-button>
            </div>
        </div>

        <div class="interspaceH"></div>

        <el-table :data="dataSource" @selection-change="rowChange" style="width: 100%"
                  :header-cell-style="{background:'#F3F4F7',color:'#555'}">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="publishType" label="发布类型" :formatter="formatter"></el-table-column>
            <el-table-column prop="content" label="内容"></el-table-column>
            <el-table-column prop="momentsType" label="朋友圈类型" :formatter="formatter"></el-table-column>
            <el-table-column prop="createMember" label="创建人"></el-table-column>
            <el-table-column prop="publishMember" label="发表成员"></el-table-column>
            <el-table-column prop="publishState" label="发布状态" :formatter="formatter"></el-table-column>
            <el-table-column prop="publishTime" label="发布时间" :formatter="formatter"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="detailHandle(scope.row)" type="text" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="interspaceH"></div>

        <el-pagination :current-page="tablePage"
                       :page-sizes="[10, 15, 20, 25]" :page-size="10" layout="total, sizes, prev, pager, next" :total="dataSource.length">
        </el-pagination>

        <el-dialog title="详情" :visible.sync="detailVisible" width="30%">
            <el-form ref="form" :model="detailForm" label-position="left" label-width="100px">
                <el-form-item label="发布类型">
                    <el-input v-model="detailForm.publishType" disabled></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="detailForm.content" disabled></el-input>
                </el-form-item>
                <el-form-item label="朋友圈类型">
                    <el-input v-model="detailForm.momentsType" disabled></el-input>
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input v-model="detailForm.createMember" disabled></el-input>
                </el-form-item>
                <el-form-item label="发表成员">
                    <el-input v-model="detailForm.publishMember" disabled></el-input>
                </el-form-item>
                <el-form-item label="发布状态">
                    <el-input v-model="detailForm.publishState" disabled></el-input>
                </el-form-item>
                <el-form-item label="发布时间">
                    <el-input v-model="detailForm.publishTime" disabled></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="detailVisible = false">返回</el-button>
            </span>
        </el-dialog>

    </el-card>
</template>

<script>

const queryData = {
    createMember: '',//创建人
    momentsType: '',//朋友圈类型
    publishTime: ''//发布时间
}

//多选框 - 开始
const publishType = [
    {
        value: '1',
        label: '类型1'
    },
    {
        value: '2',
        label: '类型2'
    }
]

const momentsType = [
    {
        value: '1',
        label: '图片'
    },
    {
        value: '2',
        label: '链接'
    }
]

const publishState = [
    {
        value: '1',
        label: '已发布'
    },
    {
        value: '2',
        label: '未发布'
    }
]
//多选框 - 结束

export default {
    name: "enterprise_weChat",
    data() {
        return {
            tablePage: 0,
            multipleSelection: [],
            detailVisible: false,
            dictionary: {
                publishType: publishType,
                momentsType: momentsType,
                publishState: publishState,
            },
            fieldType: {
                publishType: 'array',
                momentsType: 'array',
                publishState: 'array',
                publishTime: 'datetime'
            },
            queryData: {
                createMember: '',//创建人
                momentsType: '',//朋友圈类型
                publishTime: ''//发布时间
            },
            detailForm: {
                publishType: '',
                content: '',
                momentsType: '',
                createMember: '',
                publishMember: '',
                publishState: '',
                publishTime: ''
            },
            dataSource: [
                {
                    publishType: '1',
                    content: '众哲鑫区块链...',
                    momentsType: '1',
                    createMember: '张三',
                    publishMember: '李四',
                    publishState: '1',
                    publishTime: new Date()
                }
            ]
        }
    },
    mounted() {
        this.queryDataHandle()
    },
    methods: {
        queryDataHandle() {
            let that = this;
        },
        resetQuery() {
            this.queryData = queryData
            this.$message({
                message: '重置成功',
                type: 'success'
            });
        },
        rowChange(val) {
            this.multipleSelection = val;
        },
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
        },
        detailHandle(row) {
            this.detailForm = this.$utils.formatterForForm(row, this.fieldType, this.dictionary);
            this.detailVisible = true
        }
    }
}
</script>

<style scoped>
.el-input {
    width: 200px;
}

.el-select {
    width: 200px;
}

.el-form-item__content .el-input {
    width: 100%;
}
</style>
